<template>
  <div>
    <el-button type="primary" @click="drawer = true">添加</el-button>
    <table width="100%" border="1">
      <tr>
        <th>序号</th>
        <th>商品名</th>
        <th>图片</th>
        <th>单价</th>
        <th>数量</th>
        <th>规格</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in arr" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.url }}</td>
        <td>{{ item.pic }}</td>
        <td>{{ item.num }}</td>
        <td>{{ item.gui }}</td>
        <td>
          <button @click="xx(item.id, index)">修改</button>
          <button @click="del(item.id)">删除</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
let arr = ref([])

let getCar = () => {
  axios.post('/api/getCar').then((res) => {
    console.log(res.data)
    arr.value = res.data.data
    arr.value.forEach((item) => {
      if (item.bol == 0) {
        item.bol = false
      } else if (item.bol == 1) {
        item.bol = true
      }
    })
  })
}
onMounted(() => {
  getCar()
})
</script>

<style lang="scss" scoped>
td {
  text-align: center;
  span {
    cursor: pointer;
  }
}
</style>
